@import './variable.less';
page {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  background-color: #f3f4f8;
  font-size: 28rpx;
  color: #3E3E3E;
}
button::after {
  border: none;
}
button {
  margin: 0;
  padding: 0;

  border-radius: 0;
  background-color: #fff;

  line-height: 1;
}
.button-hover {
  background-color: #fff;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;

  color: transparent;
}
/* 布局 对齐 */
.flex {
  display: flex;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-column {
  flex-direction: column;
}

.flex-middle {
  align-items: center;
}
.flex-alignEnd{
  align-items:flex-end
}
.align-end {
  align-self: flex-end;
}
@set: {
  between: space-between;
  center: center;
  around: space-around;
  end: flex-end;
}
each(@set, {
  .flex-@{key} {
    justify-content: @value;
  }
})

each(range(4), {
  .flex-@{value} {
    flex: @value;
  }
})
.flex-auto {
  flex: auto;
}
.shrink-0 {
  flex-shrink: 0;
}

.cen-mid {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

.line-height{
  line-height: 1;
}
.full-container {
  min-height: 100%;
  background-color: #fff;
  &.bg {
    background-color: @bg!important;
  }
}
.overflow-h{
  overflow: hidden;
}
.fix-page {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

 .overflow-h;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
@align: left center right justify;
each(@align, {
  .text-@{value} {
    text-align: @value;
  }
})

/* 字体 颜色 */
@color: {
  primary: @base;
  gray: @lightgray;
  white: #fff;
  weixin: @weixin;
}
each(@color, {
  .@{key}-color {
    color: @value;
  }
  .bg-@{key} {
    background: @value;
  }
});
each(range(16,36,2), {
  .fs-lh-@{value} {
    font-size: (@value * 1rpx);
    line-height: 1;
  }
});
.font-bold {
  font-weight: bold;
}
.font-bold500 {
  font-weight: 500;
}
.line-through {
  text-decoration: line-through;
}

.fs-16 {
  font-size: 16rpx;
}
.fs-20 {
  font-size: 20rpx;
}
.fs-24 {
  font-size: 24rpx;
  line-height: 32rpx;
}
.fs-26 {
  font-size: 26rpx;
  line-height: 34rpx;
}
.fs-28 {
  font-size: 28rpx;
  line-height: 38rpx;
}
.fs-30 {
  font-size: 30rpx;
  line-height: 40rpx;
}
.fs-36 {
  font-size: 36rpx;
  line-height: 48rpx;
}
.wb-ba{word-break: break-all;}
.white-nowrap{
  white-space: nowrap
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* border-radius 4至20 */
each(range(4,20,2), {
  .br-@{value} {
    .round(@value * 1rpx);
  }
});
/* 容器间距 */
/* margin定义，使用： .ml-10, .mt-20, .mr-30 */
@margin: {
  t: top;
  r: right;
  b: bottom;
  l: left;
}
each(range(5,50,5), .(@value){
  each(@margin, .(@v, @k) {
    .m@{k}-@{value} {
      margin-@{v}: @value * 1rpx;
    }
    .p@{k}-@{value} {
      padding-@{v}: @value * 1rpx;
    }
  })
})
/* 通用输入块 */
.input-item {
  margin-left: 30rpx;
  padding: 30rpx 30rpx 30rpx 0;

  font-size: 32rpx;
  height: 126rpx;
  box-sizing: border-box;
  & + .input-item {
    border-top: 1rpx solid @border-color;
  }
  .item-left {
    flex-shrink: 0;

    margin-right: 20rpx;
  }
}

/* 底部间距 一般结合.fixed-footer 使用 */
.bottom-footer-gap {
  height: 120rpx;
}
.fixed-footer{
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 95rpx;
  background: #fff;
  box-shadow: 0 -10rpx 24rpx 0 rgba(182, 182, 182, 0.28);
  .footer-left {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    color: #E93B3B;
    font-size: 30rpx;
    padding-left: 25rpx;
  }
  .footer-btn {
    position: relative;
    width: 308rpx;
    height: 95rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background-color: #e83445;
    color: #fff;
    font-size: 30rpx;
    line-height: 1;
  }
}

.view-gap {
  &.gap-large {
    height: 26rpx;
  }
  &.gap-medium {
    height: 15rpx;
  }
  &.gap-small {
    height: 18rpx;
  }
  &.gap-mini {
    height: 5rpx;
  }
}
.page-fixed{
  position: fixed;
  .wh(100%);
  z-index: 800;
  background: rgba(0, 0, 0, 0.5);
  &.on{
    top: 0;
  }
}
.UserBtn{
  .wh(100%);
  position: absolute;
  left: 0;
  top: 0;
  background: no-repeat;
  z-index: 900;
}
.UserBtn2{
  .wh(100%);
  position: absolute;
  left: 0;
  top: 0;
  background: no-repeat;
  z-index: 800;
}